<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - Smartisan</title>
    <script src="../jquery/jquery.js"></script>
    <script src="../jquery/jquery.validate.js"></script>
    <script src="../jquery/messages_zh.js"></script>
    <style>
        body,
        ul,
        li,
        dl,
        dt,
        dd,
        p,
        ol,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        form,
        img,
        td,
        fieldset,
        legend {
            margin: 0;
            padding: 0;
        }

        ul,
        li,
        ol {
            list-style: none;
        }

        img,
        fieldset,
        iframe {
            border: 0;
        }

        img {
            display: block;
            border: none;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: 100;
        }

        body {
            font-size: 12px;
            font-family: "微软雅黑";
        }

        input,
        a {
            outline: none;
        }

        body html {
            width: 100%;
            height: 100%;
        }

        .l1 {
            width: 480px;
            height: 582px;
            background-color: white;
            border: 0.5px solid #dadada;
            margin: 40px auto 30px;
            border-radius: 10px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
            overflow: hidden;
        }

        .login {
            width: 100%;
            height: 800px;
            background-image: url(https://static.smartisanos.cn/account.common/img/v3/bg_7fb769c373@2x.png);
            background-size: 100%;
            overflow: hidden;
        }

        .inp {
            height: 38px;
            background: rgba(0, 0, 0, .03);
            box-shadow: none;
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, .08);
            text-indent: 15px;
            font-size: 15px;
            line-height: 40px;
            opacity: 1 !important;
            position: relative;
            width: 430px;
            margin: 10px auto;
        }

        .l2 {
            width: 444px;
            height: 300px;
            margin: 0px auto;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="login">
        <div class="l1">
            <div class="title" style="background-image:url( https://static.smartisanos.cn/account.common/img/v3/logo/cloud_b308865e15@2x.png);
             background-size: 120px auto;
             background-repeat: no-repeat;
             background-position: center 30px;width: 100%;height: 209px;position: relative;margin-bottom: 60px;">
                <h4 style="height: 29px;line-height: 29px;font-size: 24px;font-weight: 500;
                color: rgba(0,0,0,.8);position: absolute;bottom: 0;width: 100%;text-align: center;">使用 Smartisan ID
                    登录官网</h4>
            </div>
            <form action="" name="frm">
            <div class="l2">
                <input type="text" placeholder="手机号/邮箱" class="inp" name="input1">
                <div class="pass" style="position: relative;overflow: hidden;">
                    <input type="password" placeholder="密码" class="inp" style="float: left;" name="input2">
                    <img src="https://static.smartisanos.cn/account.common/img/v3/un-visibility_2603eb7974@2x.png"
                        style="width: 40px;
                 height: 40px;right:7px;top:12px;position:absolute;float:right;">
                </div>
                <div style="width: 420px;height: 28px;margin: 6px 12px 0px; ">
                    <div style="float: left;font-size: 13.5px;color: #999;">
                        <span><a href=""></a></span>自动登录
                    </div>
                    <div style="float: right;font-size: 13.5px;color: #5C89F2;">
                        <a href="./zhuce.html" style="color: hotpink;"><span
                                style="padding-right: 8px;border-right:1px; ">注册入口</span></a>
                        <span>忘记密码？</span>
                    </div>
                </div>
                <!-- 登录 -->

                <button type="button"
                    style="width: 444px;height: 60px;line-height: 60px;margin: 0;box-sizing: border-box;background: #5C89F2;
                border: 1px solid #3d70ef;border-radius: 10px;text-align: center;line-height: 60px;font-size: 18px;color: #fff;">登录</button>
                <!-- 账号登录 -->
                <div style="height: 31px;margin-top: 10px;line-height: 31px;">
                    <div style="float: left;">
                        其他账号登录：<img
                            src="https://static.smartisanos.cn/account.common/img/v3/tripartite_icon/weixin-light_ff8b93a1f7@2x.png"
                            style="width: 16px;
                      height: 16px;
                      margin-top: 7.5px;
                      background-position: 0 0;
                      background-size: 16px;display:inline-block;margin-right: 5px;"><img
                            src="https://static.smartisanos.cn/account.common/img/v3/tripartite_icon/weibo-light_24e8fad3a6@2x.png"
                            style="width: 16px;
                      height: 16px;
                      margin-top: 7.5px;
                      background-position: 0 0;
                      background-size: 16px;display:inline-block">
                    </div>
                    <div style="float: right;">
                        国际手机号登录>
                    </div>
                </div>
                <hr>
                <div style="font-size: 13.5px;
                font-weight: 700;height:24px;text-align: center;line-height: 24px;margin-top: 10px;">
                    登录代表你已同意 用户协议 和 隐私政策
                </div>
            </div>
            </form>
        </div>
        <h3 style="text-align: center;margin-top: 50px;height: 28px;
                    line-height: 28px;
                    font-size: 14px;
                    color: rgba(0,0,0,.4);">Copyright © 2020 smartisan.com 版权所有</h3>
        <div style="text-align: center;margin: 10px auto;">
            <a href="https://beian.miit.gov.cn/#/Integrated/index" style="color: #5c89f2;font-size: 14px;">京 ICP 备
                18020659 号 - 2</a>
        </div>
    </div>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/login.js"></script>
    <script>
        $('[name="frm"]').validate({
            rules: {
                input1: {
                    required: true,
                    digits: true,
                    maxlength: 11,
                    minlength: 11,
                },

                input2: {
                    required: true,
                    rangelength: [4, 15]
                }

            }
        })
    </script>
</body>

</html>